Day11【每天5分鐘】學前端 | CSS 清單 ol & ul 樣式設定

14th鐵人賽 css list

Olivia

2022-09-12 23:59:11

1458 瀏覽

分享至

補充說明 HTML 清單 和 影片 的標籤，並練習 CSS 樣式的設定。

清單有兩種

無序清單（unordered list）：使用 <ul> 標籤
有序清單（ordered list）：使用 <ol> 標籤

項目內容則都是使用 <li> 標籤

附上 W3School 介紹連結（無序清單點我、有序清單點我）

我們來看看實例：

<body>
    <div class="diy_card">
        <video controls autoplay muted loop>
            <source src="coffee_tonic_diy.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="txt">
            <h3>材料：</h3>
            <ul>
                <li>通寧水 1 罐</li>
                <li>冰塊數顆</li>
                <li>咖啡 或 濃縮咖啡</li>
            </ul>
            <h3>作法：</h3>
            <ol>
                <li>在透明玻璃杯中放入冰塊</li>
                <li>倒入通寧水約 8 分滿</li>
                <li>可使用湯匙當輔助，緩緩地將咖啡倒入</li>
            </ol>
        </div>
    </div>
</body>

這是未套用 CSS 樣式的樣子（由於圖片太大張，我在截圖時把它裁掉了）

這是套用 CSS 樣式的樣子

原始碼如下：

<head>
    <style>
        .diy_card{
            width: 600px;
            border: 2px dotted rgba(10, 21, 20, .2);
            border-radius: 10px;
            background-color: rgba(250, 230, 215, .3);
            display: flex;
        }
        video{
            width: 180px;
            height: 240px;
            padding: 10px 20px;
            margin: auto 0;
        }
        h3{
            padding-left: 20px;
        }
        ul{
            list-style-image: linear-gradient(to left bottom, white, brown);
            padding-bottom: 10px;
        }
    </style>
</head>

其中， border-radius 表示邊框的角度，0px 為直角，數值越大，弧度越大。
list-style-image 可以改變無序清單的項目圖片。 linear-gradient 表示漸層

影片標籤

附上 W3School 介紹連結網址點我

實作範例：

<video controls autoplay muted loop>
    <source src="coffee_tonic_diy.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>